<template>
  <div class="cateContent">
    <!-- //搜索层 -->
    <div class="search-box">
      <el-form ref="form" :inline="true" size="mini">
        <el-form-item>
          <el-input
            v-model.trim="paramsquery.subject_name"
            placeholder="学科名称"
            style="width: 205px"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="paramsquery.is_show"
            placeholder="显示状态"
            style="width: 205px"
          >
            <el-option :label="'显示'" :value="1" />
            <el-option :label="'隐藏'" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            plain
            size="mini"
            @click="searchCatename"
          >搜索</el-button>
          <el-button plain @click="resetCate">重置</el-button>
        </el-form-item>
        <el-form-item class="absolut">
          <el-button
            type="primary"
            plain
            size="medium"
            style="width: 95px"
            @click="TheAdd"
          >创建学科</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- //表格层 -->
    <div>
      <el-table :data="subjectList" border style="width: 100%">
        <!-- header-cell-style="text-align:center"  -->
        <el-table-column type="index" label="序号" width="90" align="center" />
        <el-table-column prop="id" label="学科ID" width="63" align="center" />
        <el-table-column
          prop="subject_name"
          label="学科名称"
          width="150"
          align="center"
        />
        <el-table-column prop="subject_icon" label="学科图标" align="center">
          <template #default="{ row }">
            <img
              style="width: 40px; height: 40px"
              :src="'http://124.223.14.236:7005/' + row.subject_icon"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column prop="username" label="创建人" align="center" />
        <el-table-column prop="is_show" label="是否显示" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.is_show"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
              @change="changeswitch(row.is_show, row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="cate_num" label="目录数量" align="center">
          <template #default="{ row }">
            <a
              v-if="row.cate_num !== 0"
              href="#"
              style="color: skyblue"
              @click="Thenext(row.id)"
            >
              <span>{{ row.cate_num }} <i class="el-icon-paperclip" /></span>
            </a>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="操作"
          width="150"
          class="textcenter"
          align="center"
        >
          <template #default="{ row }">
            <el-row type="flex" justify="center">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                size="mini"
                @click="TheEdit(row.id)"
              />
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="TheDel(row.id)"
              />
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- //dialog弹出层 -->
    <div>
      <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        width="550px"
        @close="close"
      >
        <el-form
          ref="refform"
          :model="theform"
          :rules="rules"
          class="formpad"
          label-width="120px"
        >
          <el-form-item label="学科名称" prop="subject_name">
            <el-input v-model="theform.subject_name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number
              v-model="theform.sort"
              :min="1"
              style="width: 180px"
              size="small"
            />
          </el-form-item>
          <el-form-item label="是否显示" prop="isshow">
            <el-switch
              v-model="theform.is_show"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
            />
          </el-form-item>
          <!-- //文件上传 -->
          <el-form-item label="学科图标" prop="subject_icon">
            <div class="upload">
              <el-upload
                :action="action"
                list-type="picture-card"
                :on-success="theupload"
                :file-list="theFile"
                :headers="header"
              >
                <i class="el-icon-plus" />
              </el-upload>
            </div>
            <div>建议尺寸 200 * 200</div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="Sbjsubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- //分页器 -->
    <el-row type="flex" justify="end">
      <el-pagination
        :current-page="paramsquery.page"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="paramsquery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>
<script>
import {
  GetsubjectList,
  AddsubjectList,
  GetsubjectId,
  PutsubjectId,
  DelsubjectId,
  Nextsubject
} from '@/api/subject/subject'
import store from '@/store'
export default {
  data() {
    return {
      // 表格list
      subjectList: [],
      // 搜索层
      val1: '显示',
      val2: '隐藏',
      // 弹出层Form
      theform: {
        is_show: '',
        sort: '',
        subject_icon: '',
        subject_name: ''
      },
      dialogFormVisible: false,
      title: '添加学科',
      // 校验 { required: true, message: '请输入标签名称', trigger: 'blur' }
      rules: {
        is_show: [{ required: true, message: '必须填写1', trigger: 'blur' }],
        sort: [{ required: true, message: '必须填写2', trigger: 'blur' }],
        subject_icon: [
          { required: true, message: '必须填写3', trigger: 'blur' }
        ],
        subject_name: [
          { required: true, message: '必须填写4', trigger: 'blur' }
        ]
      },
      // 分页去，页面渲染
      paramsquery: {
        subject_name: '',
        is_show: '',
        page: 1,
        limit: 10
      },
      total: 1,
      // 文件上传
      theFile: [],
      header: { Authorization: 'Bearer ' + store.getters.token },
      // action: process.env.VUE_APP_BASE_API + ''
      action:
        process.env.VUE_APP_BASE_API + '/index/upload?mode=single&type=image',
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  created() {
    this.initsubjectList()
  },
  methods: {
    // 点击switch按钮切换状态 并上传
    async changeswitch(isshow, id) {
      // console.log(222)
      await PutsubjectId({
        id: id,
        is_show: isshow
      })
      this.$message.success('修改按钮权限成功')
      this.initsubjectList()
      // console.log(id, isshow)
    },
    // 点击对应的subjectId 跳转对应列表
    async Thenext(id) {
      const res = await Nextsubject({
        subject_id: id,
        directory_name: '',
        is_show: '',
        page: 1,
        limit: 10
        // http://124.223.14.236:7005/admin/subject/directory?subject_id=1&directory_name=&is_show=&page=1&limit=10
      })
      console.log(res, 222)
      // this.$router.push('/subject/directory?subject_id=' + id)
      this.$router.push({
        path: `/subject/directory?subject_id=${id}`,
        query: {
          id
        }
      })
    },
    // 点击编辑
    async TheEdit(id) {
      this.title = '编辑学科'
      const res = await GetsubjectId(id)
      // console.log(res)
      this.theform = res
      this.dialogFormVisible = true
      this.theFile = [
        { url: 'http://124.223.14.236:7005/' + res.subject_icon }
      ]
    },
    // 点击添加
    TheAdd() {
      this.title = '添加学科'
      this.dialogFormVisible = true
    },
    // 点击删除
    async TheDel(id) {
      await DelsubjectId(id)
      this.$message.success('删除成功')
      this.initsubjectList()
    },
    // 提交添加/修改
    Sbjsubmit() {
      this.$refs.refform.validate(async(isOK) => {
        if (isOK) {
          if (this.theform.id) {
            await PutsubjectId(this.theform)
            this.$message.success('修改成功')
          } else {
            await AddsubjectList(this.theform)
            this.$message.success('添加成功')
          }
          this.initsubjectList()
          this.close()
        }
      })
    },
    // 页面渲染
    async initsubjectList() {
      const res = await GetsubjectList(this.paramsquery)
      // console.log(res)
      this.subjectList = res.list
      this.total = res.total
    },
    close() {
      this.dialogFormVisible = false
      this.theform = {
        is_show: '',
        sort: '',
        subject_icon: '',
        subject_name: ''
      }
      this.theFile = []
    },
    // 文件上传
    theupload(response) {
      console.log(response)
      this.theform.subject_icon = response.data.url
    },
    // 分页器
    handleSizeChange(val) {
      this.paramsquery.page = 1
      this.paramsquery.limit = val
      this.initsubjectList()
    },
    handleCurrentChange(val) {
      this.paramsquery.page = val
      this.initsubjectList()
    },
    // 点击搜索
    searchCatename() {
      this.paramsquery.page = 1
      this.initsubjectList()
    },
    // 重置
    resetCate() {
      this.paramsquery = {
        is_show: '',
        sort: '',
        subject_icon: '',
        subject_name: ''
      }
      this.initsubjectList()
    }
  }
}
</script>
<style lang="scss" scoped>
.cateContent {
  // margin: 20px;
  padding: 18px;
  background-color: #ffffff;
  position: relative;
  :deep(.el-upload) {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
  }
  :deep(.el-upload-list__item) {
    width: 100px;
    height: 100px;
  }
  .absolut {
    position: absolute;
    top: 15px;
    right: 2px;
  }
}
</style>

